<template>
  <div class="container">
    <div class="iframe"></div>
    <div class="index-root">
      <div class="index-empty-top"/>
      <div class="index-content">
        <div class="login-content flex-center">
          <div class="login-back">
            <div class="title-box">
              <div class="title">
                <category-title title="登录" title-sub="login"/>
              </div>
            </div>
            <a-form
                ref="VerificationFormRef"
                :label-col="{ span: 4 }"
                :model="formState"
                :wrapper-col="{ span: 20 }"
                autocomplete="off"
                labelAlign="right"
                name="basic"
                @finish="onFinish"
                @finishFailed="onFinishFailed"
            >
              <a-form-item
                  :rules="[{ required: true, message: '请输入用户名' }]"
                  label="用户名"
                  name="username"
              >
                <a-input v-model:value="formState.username"/>
              </a-form-item>

              <a-form-item
                  :rules="[{ required: true, message: '请输入密码' }]"
                  label="密码"
                  name="password"
              >
                <a-input-password v-model:value="formState.password"/>
              </a-form-item>

              <a-form-item
                  :rules="[{ required: true, message: '请输入验证码' }]"
                  :has-feedback="false"
                  class="identify"
                  label="验证码"
                  name="yzm"
              >
                <a-input v-model:value="formState.yzm" style="width: 75%"/>
                <a-button
                    :disabled="code.getCodeBtnDisable"
                    class="btnCode"
                    @click="getCode()"
                >
                  {{ code.codeBtnWord }}
                </a-button>
              </a-form-item>

              <a-form-item :wrapper-col="{ offset: 0, span: 24 }" class="btn-item">
                <div class="flex-center">
                  <a-button html-type="submit" type="primary">
                    登录
                  </a-button>
                </div>
              </a-form-item>
            </a-form>
          </div>
        </div>
      </div>
      <div class="index-header">
        <div class="index-page-title">
          <div class="title-wrap-1">
            温州科技职业学院安全管理可视化平台
          </div>
          <div class="title-wrap-2">
            {{"Visual platform for Wenzhou Science and technology Vocational College safety management".toUpperCase()}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CategoryTitle from "@/components/customs/category-title/index.vue";
import {inject} from "vue";
import {reactive, ref} from "@vue/reactivity";
import {AuthApi, LoginYzm} from "@/configs/controller";
import {message, Modal} from "ant-design-vue";
import {useRouter} from "vue-router";

const route = useRouter();
const userInfo = inject("userInfo");
const isLoading = inject("isLoading");
const formState = reactive({
  username: "",
  password: "",
  yzm: "",
});
const code = reactive({
  input: "",
  getCodeBtnDisable: false,
  waitTime: 31,
  codeBtnWord: "获取验证码",
});
const VerificationFormRef = ref();
const getCode = () => {
  VerificationFormRef.value.validateFields(["username", "password"]).then(async () => {
    try {
      const api = new LoginYzm()
          .auth('')
          .params({
            username: formState.username
          });
      await api.send();
      const {data, error, msg} = await api.getDatas();
      if (error === 1){
        Modal.warn({
          title: "提示",
          content: msg,
          centered: true,
        });
      } else {
        code.waitTime--;
        code.getCodeBtnDisable = true;
        code.codeBtnWord = `${code.waitTime}s 后获取`;
        let timer = setInterval(() => {
          if (code.waitTime > 1) {
            code.waitTime--;
            code.codeBtnWord = `${code.waitTime}s 后获取`;
          } else {
            clearInterval(timer);
            code.codeBtnWord = "获取验证码";
            code.getCodeBtnDisable = false;
            code.waitTime = 31;
          }
        }, 1000);
      }
      console.log(data);
    }catch (e) {
      console.log(e);
    }

  });
};
const onFinish = async values => {
  isLoading.value = true;
  const api = new AuthApi();
  api.data(values);
  await api.send();
  const {data, error, msg} = await api.getDatas();

  if (error !== 0) {
    console.log(data);
    isLoading.value = false;
    // message.error(msg);
    Modal.warn({
      title: "提示",
      content: msg,
      centered: true,
    });
  } else {
    localStorage.setItem("token", `${data.token_type} ${data.access_token}`);
    userInfo.load();
    isLoading.value = false;
    route.replace({
      path: "/"
    });
  }
};
const onFinishFailed = errorInfo => {
  console.log("Failed:", errorInfo);
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
